<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="../css/public.css" />
		<link rel="stylesheet" type="text/css" href="../css/first-page.css" />
		<link rel="stylesheet" type="text/css" href="../css/topbo_public.css" />
		<script src="../js/rem.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mock.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/databese.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="first-page">
			<div class="toop-public space-between">
				<a href="#" class="reverse">
					<img src="../img/reverse.svg">
				</a>
				<h3 class="title">汽配商城首页</h3>
				<div class="function">
					<img src="../img/function.png">
				</div>
			</div>
			<form action="" method="" class="form">
				<input type="text" name="" id="" value="" placeholder="摩托汽配" class="search" />
			</form>
			<!-- 轮播图 -->
			<ul id="slideshow">
				<li class="first-img"><img src="../img/first-show02.jpg" class="images"></li>
				<li><img src=""></li>
			</ul>
			<ul class="menus flex" id="menus">
				<li>
					<div class="imags">
						<img src="">
					</div>
					<p></p>
				</li>
				<li>
					<div class="imags">
						<img>
					</div>
					<p></p>
				</li>
				<li>
					<div class="imags">
						<img>
					</div>
					<p></p>
				</li>
				<li>
					<div class="imags">
						<img>
					</div>
					<p></p>
				</li>
				<li>
					<div class="imags">
						<img>
					</div>
					<p></p>
				</li>
				<li>
					<div class="imags">
						<img>
					</div>
					<p></p>
				</li>
				<li>
					<div class="imags">
						<img>
					</div>
					<p></p>
				</li>
				<li>
					<div class="imags">
						<img>
					</div>
					<p></p>
				</li>
			</ul>
			<h3 class="title">热卖爆品，火热感恩</h3>
			<ul class="content space-around" id="box">
				<li class="list skip">
					<div class="box">
						<img class="img">
					</div>
					<p class="praname"></p>
					<div class="price-join space-between">
						<p class="price"></p>
						<div class="join">
							<img class="trolley" src="../img/trolley.svg">
						</div>
					</div>
				</li>
				<li class="list">
					<div class="box">
						<img class="img">
					</div>
					<p class="praname"></p>
					<div class="price-join space-between">
						<p class="price"></p>
						<div class="join skip">
							<img class="trolley" src="../img/trolley.svg">
						</div>
					</div>
				</li>
				<li class="list">
					<div class="box">
						<img class="img">
					</div>
					<p class="praname"></p>
					<div class="price-join space-between">
						<p class="price"></p>
						<div class="join skip">
							<img class="trolley" src="../img/trolley.svg">
						</div>
					</div>
				</li>
				<li class="list skip">
					<div class="box">
						<img class="img">
					</div>
					<p class="praname"></p>
					<div class="price-join space-between">
						<p class="price"></p>
						<div class="join">
							<img class="trolley" src="../img/trolley.svg">
						</div>
					</div>
				</li>
				<li class="list">
					<div class="box">
						<img class="img">
					</div>
					<p class="praname"></p>
					<div class="price-join space-between">
						<p class="price"></p>
						<div class="join">
							<img class="trolley" src="../img/trolley.svg">
						</div>
					</div>
				</li>
				<li class="list">
					<div class="box">
						<img class="img">
					</div>
					<p class="praname"></p>
					<div class="price-join space-between">
						<p class="price"></p>
						<div class="join">
							<img class="trolley" src="../img/trolley.svg">
						</div>
					</div>
				</li>
				<li class="list">
					<div class="box">
						<img class="img">
					</div>
					<p class="praname"></p>
					<div class="price-join space-between">
						<p class="price"></p>
						<div class="join">
							<img class="trolley" src="../img/trolley.svg">
						</div>
					</div>
				</li>
				<li class="list">
					<div class="box">
						<img class="img">
					</div>
					<p class="praname"></p>
					<div class="price-join space-between">
						<p class="price"></p>
						<div class="join">
							<img class="trolley" src="../img/trolley.svg">
						</div>
					</div>
				</li>
				<li class="list">
					<div class="box">
						<img class="img">
					</div>
					<p class="praname"></p>
					<div class="price-join space-between">
						<p class="price"></p>
						<div class="join">
							<img class="trolley" src="../img/trolley.svg">
						</div>
					</div>
				</li>
				<li class="list">
					<div class="box">
						<img class="img">
					</div>
					<p class="praname"></p>
					<div class="price-join space-between">
						<p class="price"></p>
						<div class="join">
							<img class="trolley" src="../img/trolley.svg">
						</div>
					</div>
				</li>
				<li class="list">
					<div class="box">
						<img class="img">
					</div>
					<p class="praname"></p>
					<div class="price-join space-between">
						<p class="price"></p>
						<div class="join">
							<img class="trolley" src="../img/trolley.svg">
						</div>
					</div>
				</li>
				<li class="list">
					<div class="box">
						<img class="img">
					</div>
					<p class="praname"></p>
					<div class="price-join space-between">
						<p class="price"></p>
						<div class="join">
							<img class="trolley" src="../img/trolley.svg">
						</div>
					</div>
				</li>
			</ul>
			<div class="footer-public ">
				<ul class="space-around">
					<li>
						<div class="box-icon">
							<img src="../img/home-page.svg">
						</div>
						<span>首页</span>
					</li>
					<li class="skclassify"> 
						<div class="box-icon">
							<img src="../img/classify.svg">
						</div>
						<span>分类</span>
					</li>
					<li class="skshopping">
						<div class="box-icon">
							<img src="../img/shopping.svg">
						</div>
						<span>购物车</span>
					</li>
					<li class="skcenter">
						<div class="box-icon">
							<img src="../img/mine.svg">
						</div>
						<span>我的</span>
					</li>
				</ul>
			</div>
			<a href="#" class="return-top">
				<img src="../img/to-top.svg" class="to-top">
			</a>
		</div>
		<script src="../js/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function menus(obj) {
				let menus = document.getElementById("menus");
				let imags = menus.getElementsByTagName("img");
				let text = menus.getElementsByTagName("p");
				for (i = 0; i < imags.length; i++) {
					imags[i].src = obj.arrimg[i];
					text[i].innerHTML += obj.arrp[i];
					// console.log(obj.arrp[i])
				}
			}
			var t = menus({
				'arrimg': [
					'../img/icon01.png',
					'../img/icon02.png',
					'../img/icon03.png',
					'../img/icon04.png',
					'../img/icon05.png',
					'../img/icon06.png',
					'../img/icon07.png',
					'../img/icon08.png'
				],
				'arrp': [
					'空调器',
					'空调滤',
					'火花塞',
					'机油',
					'刹车盘',
					'雨刮',
					'皮带',
					'更多'
				]
			});

			function loadMock() {
				let menus = document.getElementById("box");
				let picture = menus.getElementsByClassName("img");
				let text = menus.getElementsByClassName("praname");
				let price = menus.getElementsByClassName("price");
				let trolley = menus.getElementsByClassName("trolley");
				mock.comList.forEach(function(obj, index) {
					// console.log(obj);
					console.log(index);
					// console.log(picture[index])
					picture[index].src = obj.images;
					text[index].innerHTML += obj.descrip;
					price[index].innerHTML += obj.price;
				})
			};
			loadMock()
			
			document.addEventListener('plusready', function() {
						app.touchend({
							el: '.skip',
							path: 'commodity-details.html',
							effect: 'slide-in-right',
							time: 400
						});
						
						app.touchend({
							el: '.skclassify',
							path: 'classify.html',
							effect: 'none',
							time: 400
						});
						
						app.touchend({
							el: '.skshopping',
							path: 'shopping-trolley.html',
							effect: 'none',
							time: 400
						});
						
						app.touchend({
							el:'.skcenter',
							path:'personal-center.html',
						});
					});
		</script>
	</body>
</html>
